<template>
  <div class="itempanel">
    <ItemPanelHeader :item="item">
      <div slot="itemPanelHeaderMenu" slot-scope="{ sitem }">
        <slot name="customItemPanelHeaderMenu" :sitem="sitem"></slot>
      </div>
    </ItemPanelHeader>
    <ItemPanelContent :item="item"></ItemPanelContent>
  </div>
</template>
<script>
export default {
  name: "ItemPanel",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {
    ItemPanelHeader: () =>
      import(
        /* webpackChunkName: "itemPanelHeader" */ "../../components/common/itemPanel/itemPanelHeader"
      ),
    ItemPanelContent: () =>
      import(
        /* webpackChunkName: "itemPanelContent" */ "../../components/common/itemPanel/itemPanelContent"
      ),
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.itempanel {
  background-color: #fff;
  display: block;
  overflow: hidden;
  text-align: left;
  padding: 0;
  margin: 0;
}
</style>
